<template>
	<view class="container f-center" style="height: 100%; align-items: center;">
		<view class="student">
			<view class="student-name">小夜曲</view>
			<image class="student-sex" src="/static/img/ic-sex-0.png"></image>
			<view class="student-school">哈尔滨学校名称</view>
			<view class="student-class">三年二班</view>
			<view class="student-number">231089199904221234</view>
			<image class="student-head" src="/static/img/head.png"></image>
		</view>

		<view class="record">
			<view class="record-cover">
				<view class="record-title">
					<view class="record-title-name">2025年第一次体测</view>
					<view class="record-title-date">2025-11-04</view>
				</view>
				<view class="list">
					<view class="list-item">
						<view class="list-item-project">跳远</view>
						<view class="list-item-detail">去查看</view>
						<image class="list-item-arrow" src="/static/img/arrow-right.png" />
						<view><app-scale-bar :value="value"></app-scale-bar></view>
						<view class="list-item-score">
							<view class="list-item-score-name">当前分数：</view>
							<view class="list-item-score-value">80</view>
							<view class="list-item-score-level">优秀</view>
						</view>
					</view>
				</view>
				<view class="ranking">
					<view class="ranking-class">
						<view class="ranking-class-label">班级排名</view>
						<view class="ranking-class-value">TOP1</view>
					</view>
					<view class="ranking-grade">
						<view class="ranking-grade-label">年级排名</view>
						<view class="ranking-grade-value">TOP7</view>
					</view>
				</view>
				<image class="pic" src="/static/img/photo.png"></image>
			</view>

		</view>
	</view>
</template>
<script>
	import AppScaleBar from '@/components/app-scale-bar/index.vue'
	export default {
		components: {
			AppScaleBar
		},
		data() {
			return {
				value: 90,

			}
		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.pic {
		margin-top:20rpx;
		width: 680rpx;
		height: 600rpx;
	}

	.ranking {
		display: flex;
		justify-content: space-between;

		&-class {
			padding: 28rpx;
			box-sizing: border-box;
			width: 328rpx;
			height: 144rpx;
			border-radius: 20rpx;
			background: linear-gradient(114deg, #F4D974 -1%, #FCFCAD 52%, #FBED7B 100%);

			&-label {
				font-size: 32rpx;
				font-weight: bold;
				color: $uni-color-title;
			}

			&-value {
				background: linear-gradient(180deg, #D25628 0%, #E9AE65 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				font-size: 52rpx;
				font-weight: bold;
			}
		}

		&-grade {
			padding: 28rpx;
			box-sizing: border-box;
			width: 328rpx;
			height: 144rpx;
			border-radius: 20rpx;
			background: linear-gradient(114deg, #F4D974 -1%, #FCFCAD 52%, #FBED7B 100%);

			&-label {
				font-size: 32rpx;
				font-weight: bold;
				color: $uni-color-title;
			}

			&-value {
				background: linear-gradient(180deg, #D25628 0%, #E9AE65 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
				font-size: 52rpx;
				font-weight: bold;
			}
		}
	}

	.record {
		width: 100%;
		position: relative;
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		position: relative;

		.list {
			display: flex;
			flex-direction: column;
			align-items: center;

			// overflow-y: auto;

			&-item {
				width: 680rpx;
				border-radius: 20rpx;
				background: #F1FFFC;
				box-sizing: border-box;
				padding: 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				&-lock {
					display: flex;
					align-items: center;

					&-project {
						font-size: 32rpx;
						font-weight: bold;
						color: $uni-color-title;
					}

					&-ic {
						margin-left: 10rpx;
						width: 32rpx;
						height: 32rpx;
					}

					&-text {
						position: absolute;
						right: 40rpx;
						top: 22rpx;
						color: #666;
						font-size: 28rpx;
					}

					&-arrow {
						position: absolute;
						right: 10rpx;
						top: 28rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}

				&-score {
					display: flex;
					align-items: center;
					margin-top: 8rpx;

					&-name {
						font-size: 32rpx;
						color: #1A1A1A;
					}

					&-value {
						color: #1A1A1A;
						font-size: 48rpx;
						font-weight: bold;
					}

					&-level {
						margin-left: 20rpx;
						height: 36rpx;
						border-radius: 12rpx;
						@include center();
						padding: 6rpx 12rpx;
						background: linear-gradient(90deg, #38CDB0 0%, #59E8B5 100%);
						color: #fff;
						font-size: 24rpx;
					}
				}

				&-project {
					font-size: 32rpx;
					font-weight: bold;
					color: $uni-color-title;
				}

				&-detail {
					position: absolute;
					right: 50rpx;
					top: 16rpx;
					color: #666;
					font-size: 26rpx;
				}

				&-arrow {
					position: absolute;
					right: 10rpx;
					top: 20rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		&-title {

			width: 100%;
			display: flex;
			align-items: center;
			padding: 24rpx 0;
			position: relative;


			image {
				width: 16.58rpx;
				height: 24rpx;
			}

			&-name {

				width: fit-content;
				color: #1A1A1A;
				font-size: 36rpx;
				width: 460rpx;
				overflow: hidden;
				font-weight: bold;

			}

			&-date {
				font-size: 28rpx;
				color: #666666;
				position: absolute;
				right: 10rpx;

			}
		}



		&-cover {
			width: 680rpx;
			// border-radius: 28rpx;
			// background: #FFFFFF;
			// box-shadow: 0px 8rpx 20rpx 0px rgba(19, 88, 76, 0.1);
		}
	}

	.student {
		margin-top: 14rpx;
		width: 680rpx;
		height: 228rpx;
		box-sizing: border-box;
		padding: 22rpx 28rpx;
		position: relative;
		border-radius: 28rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx 0px rgba(16, 74, 60, 0.1);

		&-head {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			border-radius: 50%;
			width: 100rpx;
			height: 100rpx;
		}

		&-number {
			position: absolute;
			bottom: 34rpx;
			right: 20rpx;
			height: 52rpx;
			width: fit-content;
			margin-top: 18rpx;
			border-radius: 64rpx;
			background: #E7FCF8;
			box-sizing: border-box;
			padding: 12rpx 16rpx;
			@include center();
			color: #666;
			font-size: 28rpx;
		}

		&-class {
			height: 52rpx;
			width: fit-content;
			margin-top: 18rpx;
			border-radius: 64rpx;
			background: #E7FCF8;
			box-sizing: border-box;
			padding: 12rpx 16rpx;
			@include center();
			color: #666;
			font-size: 28rpx;
		}

		&-school {
			margin-top: 18rpx;
			color: #666;
			font-size: 28rpx;
		}

		&-sex {
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 30rpx;
			left: 160rpx;
			left: 200rpx;
		}



		&-name {
			color: #1A1A1A;
			font-size: 36rpx;
		}

	}
</style>